<template>
    <div>
        <van-nav-bar class="bj" title="个人中心" left-arrow @click-left='on'/>
        <div class="footer">
            <input type="file" accept="image/*" ref="file" class="imgs" @change="upload">
            <van-cell title="头像" center>
                <van-image round width="50" height="50" :src="user.avatar"/>
            </van-cell>
            <van-cell title="昵称" :value="user.nickname" is-link @click="newname" />
            <van-cell title="性别" :value="user.sex" is-link @click="newsex"/>
            <van-cell title="生日" :value="user.birthday" is-link @click="newbirsty"/>
        </div>
        <van-button class="sure" type="primary" block @click="editUserInfo">确定</van-button>
        
        <van-dialog v-model="show" title="修改昵称" show-cancel-button @confirm="qdnc" @cancel="qxnc">
            <input type="text" class="nc" v-model="newName" >
        </van-dialog>
        <van-popup v-model="cont" position="bottom">
            <van-picker title="性别" show-toolbar :columns="columns" @confirm="Confirm" @cancel="qxnc"/>
        </van-popup>
        <van-popup v-model="time" position="bottom">
            <van-datetime-picker type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="Contime" @cancel="qxnc"/>
        </van-popup>
    </div>
</template>
<script>

const moment= require('moment')

    export default({
        data(){
            return{
                user:{
                    avatar:'',
                    nickname:'小明',
                    sex:'男',
                    birthday:'',
                    uid:'',
                },
                show: false,
                newName:'',
                columns: ['男', '女'],
                cont:false,
                minDate: new Date(1000, 0, 1),
                maxDate: new Date,
                time:false,
            }
        },
        methods:{
            on(){
                this.$router.push('/anniu3')
            },
            newname(){
                this.show = true
                this.user.nickname = this.newName
            },
            qdnc(){
                this.user.nickname = this.newName
                this.show = false
            },
            qxnc(){
                this.show = false
                this.cont = false
                this.time = false
            },
            Confirm(value){
                this.user.sex = value
                this.cont = false
            },
            newsex(){
                this.cont = true
            },
            newbirsty(){
                this.time = true
            },
            Contime(value){
                const data = moment(value).format('YYYY-MM-DD')
                this.user.birthday = data
                this.time = false
            },
            async upload(e){
                let file = e.target.files[0]
                let { type } = file;
                //  拿到类型  比如jpg
                type = type.split('/')[1];  
                // 重新命名
                let file_name = `${new Date().getTime()}_${Math.random()
                    .toString(36)
                    .slice(2)}.${type}`;
                // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
                let { token } = await this.$http.post('/upload/token');
                
                // new一个form data   并且把文件 token  和文件的名字放进去  file token key是固定的 不能改 
                const formdata = new FormData();
                formdata.append('file', file);
                formdata.append('token', token);
                formdata.append('key', file_name);
                // https://upload-z1.qiniup.com 是上传到七牛的真正接口  其中z1是华北区域
                let result = await this.$http.post('https://upload-z1.qiniup.com', formdata);
                console.log(result);
                console.log(`http://toutiao.longxiaokj.com/` + result.key);
                this.user.avatar = `http://toutiao.longxiaokj.com/` + result.key
                // `http://toutiao.longxiaokj.com/` + result.key  这个地址就是传到服务器的地址  
                // 发布文章时 imageSrc  字段需要的就是这个
            },
            editUserInfo(){
                this.user.uid = localStorage.getItem('uid')
                this.$http.post('/user/editUserInfo',this.user)
                .then((res)=>{
                    console.log(res)
                    console.log(this.user)
                    localStorage.setItem('userInfor',JSON.stringify(this.user))
                    this.$router.push('/anniu3')
                })
                .catch((error)=>{
                    console.log(error)
                    
                })
            }
        },
        created(){
            let userInfo = JSON.parse(localStorage.getItem('userInfor'))
            this.user.avatar = userInfo.avatar
            this.user.nickname = userInfo.nickname
            this.user.sex = userInfo.sex
            this.user.birthday = userInfo.birthday
            this.user.uid = userInfo.uid
        }
    })
</script>
<style>
.bj{
    width: 100%;
    height:46px;
    background-color: rgb(7,193,96);
}
.imgs{
    width: 100%;
    height: 79.21px;
    position: absolute;
    z-index: 2;
    opacity: 0;
}
.footer .van-cell{
    border: 1px solid #f7f7f9;
}
.sure{
    width: 90%;
    margin: 0 auto;
}
.nc{
    display: block;
    margin: 0 auto;
    width: 80%;
    border: 1px solid #ccc;
    margin-top: 10px;
    line-height: 30px;
}
</style>